<div id="banner" style="width:100%">
    <div class="moduletable mobilehide">
        <div class="jbmoduleBody">
            <div id="zentools35" class="slideshow slideshowflat ">
                <div class="zentools slideshow flexslider noborder count5 ">
                    <ul id="zentoolslist35" class="slides">	
                        <?php
							$textlengh = 250;
							$Nbreak_query = "SELECT id, news_title, news_detail, news_img from tbl_news ORDER BY id DESC LIMIT 4";
							$result = mysql_query("$Nbreak_query");
							if(mysql_num_rows($result) > 0)
							{
								while($rows = mysql_fetch_assoc($result))
								{
									extract($rows);
						?>
                        <li class="grid_twelve element macrobotanicals zenlast" style="width: 100%; float: left; margin-right: -100%; display: none; ">		
                            <div class="zenitem zenitem1  image">
                                <div class="zeninner">
                                    <div class="column grid_six">
                                        <div class="zenimage element1 firstitem">
                                            <a href="index.php?mod=news&act=ndetail&id=<?php echo $id; ?>"><img style="height: 283px;" src="<?php echo $news_img; ?>"></a>
                                        </div>
                                    </div>
                                    <div class="column2 grid_six zenlast">					
                                        <div class="zentitle element3">
                                            <h2><a href="index.php?mod=news&act=ndetail&id=<?php echo $id; ?>"><?php echo $news_title; ?></a></h2>
                                        </div>
                                        <div class="zentext element4">
                                            <p>
											<?php 
												echo mb_substr(strip_tags($news_detail), 0, $textlengh, 'UTF-8');
												echo "...";
											?>
                                            </p>
                                         </div>
                                         <div class="zenmore element5">
                                            <a href="index.php?mod=news&act=ndetail&id=<?php echo $id; ?>"><span class="readon">Xem thêm ...</span></a>
                                         </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <?php
								}
							}
						?>
                    </ul>
                    <div class="slide-controller">
                        <div class="slidenavdiscs slidenav35">
                            <ul class="slidenav">
                                <li class=""><span>1</span></li>
                                <li class=""><span>2</span></li>
                                <li class=""><span>3</span></li>
                                <li class="active"><span>4</span></li>									
                            </ul>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>				
        </div>
    </div>
</div> 
<script type="text/javascript" charset="utf-8">
	jQuery(window).load(function() {
		jQuery('#zentools35').flexslider({
			animation: "fade",              //String: Select your animation type, "fade" or "slide"
			slideDirection: "horizontal",   //String: Select the sliding direction, "horizontal" or "vertical"
			manualControls: ".slidenav35 ul li", 
							slideshow: true,                //Boolean: Animate slider automatically
							slideshowSpeed: 5000,           //Integer: Set the speed of the slideshow cycling, in milliseconds
							animationDuration: 500,         //Integer: Set the speed of animations, in milliseconds
							directionNav: false, 
							controlNav: true,               //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
							keyboardNav: true,              //Boolean: Allow slider navigating via keyboard left/right keys
							mousewheel: false,              //Boolean: Allow slider navigating via mousewheel
							//prevText: "Previous",           //String: Set the text for the "previous" directionNav item
							//nextText: "Next",               //String: Set the text for the "next" directionNav item
							slideToStart: 0,                //Integer: The slide that the slider should start on. Array notation (0 = first slide)
							animationLoop: true,
							pauseOnAction: false,            //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
							pauseOnHover:false,
			controlsContainer: '.slide-controller', 
			start: function(slider){
				jQuery('.current-slide').text(slider.currentSlide + 1);
				jQuery('.total-slides').text(slider.count);
			},
			
			before: function(slider){
				jQuery("#zentools35 .allitems.text").slideUp();					
			},
			after: function(slider){
				jQuery("#zentools35 .allitems.text").slideDown();
				jQuery('.current-slide').text(slider.currentSlide + 1);
			}
		});		
		jQuery("#zentools35 .flex-control-nav a,#zentools35 .flex-direction-nav a,.slidenav35 ul li").click(function() {
		jQuery("#zentools35 .allitems.text").slideUp();
		});
	});
</script>